<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
	<style type="text/css">
		*{
		  margin: 0;
		  padding: 0;
		  box-sizing: border-box;
		}
		 
		a{
		  text-decoration: none;
		  color: #838383;
		}
		.right {
		  display: flex;
		  flex-direction: column;
		  align-items: center;
		  width:100%;
		  height: 100vh;
		  background-color: #fff;
		  /* background-color: lightblue; */
		}
		 
		.right_header {
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  width: 100%;
		  height: 80px;
		  padding: 0 30px;
		  /* background-color: pink; */
		}

		.r_option{
		  display: flex;
		  align-items: center;
		  height: 100%;
		}
		.r_option a{
		  font-size: 14px;
		  margin: 0 10px;
		}
		.r_option a:hover{
		  color: orange;
		}
		select{
		  color: #838383;
		  border: 0;
		}
		 
		.right_body {
		  width: 35%;
		  /* height: 75%; */
		  margin-top: 3%;
		  padding-bottom: 15px;
		  border: 1px solid #eee;
		  box-shadow: 2px 3px 5px #eee;
		}
		.log_reg{
		  width: 100%;
		  height: 50px;
		  line-height: 50px;
		  margin: 30px;
		  /* background-color: pink; */
		  animation: fadeInUp;
		  animation-duration: 2s;
		}
		.log_reg a{
		  font-size: 22px;
		  margin: 0 10px;
		  padding: 5px 0;
		  cursor: pointer;
		  
		}
		.isActice{
		  color: #000;
		  font-weight: 400;

		}
		.login_content,
		.register_content{
		  width: 100%;
		  text-align: center;
		  margin-top: 20px;
		}
		form{
		  width: 100%;
		  text-align: center;
		  /* background-color: pink; */
		}
		 
		.ipt{
		  width: 80%;
		  height: 60px;
		  border: none;
		  outline: none;
		  padding: 0 20px;
		  margin: 10px 0;
		  font-size: 17px;
		  background-color: #f9f9f9;
		}

		.log_btn,
		.reg_btn{
		  width: 80%;
		  height: 50px;
		  margin-top: 20px;
		  margin-bottom: 10px;
		  border: none;
		  color: #fff;
		  font-size: 14px;
		  font-weight: 500;
		  border-radius: 5px;
		  outline: none;
		  background-color:skyblue;
		}
		.forget{
		  width: 80%;
		  margin: 0 auto;
		  display: flex;
		  justify-content: space-between;
		}
		.forget a{
		  font-size: 17px;
		  color: black;
		  animation: jackInTheBox;
		  animation-duration: 2s;
		}
		.other{
		  color: #aaa;
		  font-size: 17px;
		  font-weight: 400;
		  line-height: 40px;
		  text-align: center;
		  animation: zoomInUp;
		  animation-duration: 1s;
		}
		.uname{
			animation: lightSpeedInRight;
			animation-duration: 2s;
		}
		.pwd{
			animation: lightSpeedInRight;
			animation-duration: 2s;
		}
		.log_btn{
			animation: bounceInUp;
			animation-duration: 1s;
		}
	</style>
  </head>
	
  <body>
	  
    <div id="app"></div>
    <template id="root">
      <div class="box">
        <!-- 左侧背景 -->
        <div class="left_bg"></div>
        <!-- 右侧内容 -->
        <div class="right">
          <div class="right_body">
			  <transition
	    enter-active-class="animate__animated animate__fadeInUp">
            <div class="log_reg">
              <a :class="isActice?['isActice']:[]" @click="login">登录</a>
            </div>
			</transition>
            <!-- 登录 -->
            <div class="login_content" v-if="isActice">
              <form action="">
				  <transition
				  enter-active-class="animate__animated animate__lightSpeedInRight">
                <div class="uname">
                  <input type="text" placeholder="邮箱/手机号码" class="ipt" v-model="username" />
                </div>
				</transition>
				<transition
				enter-active-class="animate__animated animate__lightSpeedInRight">
                <div class="pwd">
                  <input type="password" placeholder="密码" class="ipt" v-model="password" />
                </div>
               </transition>
              </form>
			  <transition
			  enter-active-class="animate__animated animate__jackInTheBox">
              <button class="log_btn" @click="goLogin">登录</button>
			  </transition>
			  <transition
			  enter-active-class="animate__animated animate__rotateInDownLeft">
              <div class="forget">
                <a href="javascript:;">忘记密码？</a>
                <a href="javascript:;">手机号登录</a>
              </div>
			  </transition>
			  <transition
			  enter-active-class="animate__animated animate__zoomInUp">
              <div class="other">其他方式登录</div>
			   </transition>
            </div>
          </div>
        </div>
      </div>
    </template>
	
	 <script>
	      Vue.createApp({
	        template: '#root',
	        data() {
	          return {
	            isActice: true,
	            username: '',
	            password: '',
	            r_password: '',
	            phone: '',
	            isChecked: false,
	            isChecked1: false,
	            userList: [],
	            cityvalue: 'China',
	            
	          }
	        },
	        methods: {
	         
	          goLogin() {
	            if (this.username == '' || this.password == '') {
	              alert('账号或密码为空，请输入')
	            } else {
	              if (!this.isChecked) {
	                alert('请同意用户条款')
	              } else {
	                this.userList.forEach(item => {
	                  if (item.phone == this.username && item.password == this.password) {
	                    alert('登录成功')
	                  } else {
	                    alert('登录失败')
	                  }
	                })
	              }
	            }
	          },
	        }
	      }).mount('#app')
	    </script>
 </body>
</html>
